<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item"
        type="success" icon="el-icon-plus"
        @click="onAdd">
        添加
      </el-button>
    </div>

    <el-table v-loading="loading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column type="index" width="50" align="center"/>
     
      <el-table-column align="center" label="ID" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" label="逆变器型号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.model }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" label="电压模式" align="center">
        <template slot-scope="{row}">
          <span>{{ row.hiLoMode == 1 ? '高压' : ( row.hiLoMode == 2 ? '低压' : '-')}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" label="老化房" align="center">
        <template slot-scope="{row}">
          <span>{{ row.house }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{row}">
          <el-button type="success" size="small" icon="el-icon-edit" @click="onEdit(row)">
            编辑
          </el-button>

          <el-button type="danger" size="small" icon="el-icon-video-pause" @click="onDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="设备电压模式设置"
      :visible.sync="dialogVisible"
      width="400px"
      >
      <el-form ref="form" :model="form" label-width="150px" :rules="rules">
        <input type="hidden" v-model="form.id" />
        <el-form-item label="逆变器型号" prop="model">
          <el-input v-model="form.model"></el-input>
        </el-form-item>
        <el-form-item label="高低压模式" prop="duration">
          <el-radio v-model="form.hiLoMode" :label="1">高压</el-radio>
          <el-radio v-model="form.hiLoMode" :label="2">低压</el-radio>
        </el-form-item>
        <el-form-item label="老化房" prop="voltage">
          <el-select
            v-model="form.house" placeholder="老化房"
            class="filter-item">
            <el-option
              v-for="item in houses"
              :key="item.id"
              :label="item.text"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  findAllVoltageMode,
  addVoltageMode,
  editVoltageMode,
  deleteVoltageModeById
} from '@/api/config'

export default {
  name: 'Configs',
  data() {
    return {
      dialogVisible: false,
      form: {
        model: '',
        hiLoMode: 1,
        house: 'A04'
      },
      loading: false,

      defaultProps: {
        children: 'children',
        label: 'text'
      },

      search: '',

      rules: {
        model: [
          { required: true, message: '请输入型号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请选择老化房', trigger: 'blur' },
        ],
      },

      tableData: [],

      houses: [
        {id: 'A01', text: '老化房A01'},
        {id: 'A02', text: '老化房A02'},
        {id: 'A03', text: '老化房A03'},
        {id: 'A04', text: '老化房A04'},
      ],
    }
  },
  created() {
    this.fetchList();
  },
  methods: {
    fetchList() {
      this.loading = true
      findAllVoltageMode().then(res => {
        let rows = res.data.data
        this.tableData = rows
      }).finally(() => {
        this.loading = false
      })
    },

    onDelete(row) {
      this.$confirm('确认要删除？').then(() => {
        deleteVoltageModeById(row.id).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })

          this.fetchList();
        });
      })
    },

    onEdit(row) {
      this.form = Object.assign({}, row);
      this.form.hiLoMode = this.form.hiLoMode || '1';

      this.dialogVisible = true;
    },

    onAdd() {
      this.form = {
        model: '',
        hiLoMode: 1,
        house: 'A04'
      }
      this.dialogVisible = true
    },

    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false

        this.loading = true

        let params = Object.assign({}, this.form)
        if (params.id) {
          editVoltageMode(params).then(res => {
            this.$message({
              message: '编辑成功！',
              type: 'success'
            })

            this.dialogVisible = false
            this.fetchList()
          }).finally(() => {
            this.loading = false
          })
        } else {
          addVoltageMode(params).then(res => {
            this.$message({
              message: '创建成功！',
              type: 'success'
            })

            this.dialogVisible = false
            this.fetchList()
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
